{% extends 'base.html' %}
{% load staticfiles %}

{% block title %}
    我的网站|首页
{% endblock %}

{% block header_extends %}
    <link rel="stylesheet" href="{% static 'home.css' %}">
    <script src="http://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>
{% endblock %}

{% block nav_home_active %}active{% endblock %}

{% block content %}
    <h3 class="home-content">欢迎访问我的网站，随便看</h3>
    <div id="container" style="width: 600px;height:400px;">
    
    </div>
    <div class="hot-data">
        <h3>今日热门点击</h3>
        <ul>
            {% for hot_data in today_hot_data %}
                <li><a href="{% url 'blog_detail' hot_data.content_object.pk %}">{{ hot_data.content_object.title }}</a>({{ hot_data.read_num }})</li>
            {% empty %}
                <li>今天暂时没有热门博客</li>
            {% endfor %}
        </ul>
        <h3>昨日热门点击</h3>
    </div>
    <div class="hot-data">
        <ul>
            {% for hot_data in yesterday_hot_data %}
                <li><a href="{% url 'blog_detail' hot_data.content_object.pk %}">{{ hot_data.content_object.title }}</a>({{ hot_data.read_num }})</li>
            {% empty %}
                <li>昨日暂时没有热门博客</li>
            {% endfor %}
        </ul>
    </div>
    <div class="hot-data">
        <h3>最近7天热门</h3>
        <ul>
            {% for hot_data in sevendays_hot_data %}
                <li><a href="{% url 'blog_detail' hot_data.id %}">{{ hot_data.title }}</a>({{ hot_data.read_num_sum }})</li>
            {% empty %}
                <li>最近7天没有热门博客</li>
            {% endfor %}
        </ul>
    </div>
    <script>
        // 图表配置
        var options = {
            chart: {
                type: 'line'                          //指定图表的类型，默认是折线图（line）
            },
            title: {
                text: null                 // 标题
            },
            xAxis: {
                categories: {{ dates|safe }},   // x 轴分类
                tickmarkPlacement: 'on',
                title: {text:'前七天阅读量'}
            },
            yAxis: {
                title: {
                    text: null               // y 轴标题
                },
                labels:{
                    enabled: false
                },
                gridLineDashStyle: 'Dash'
            },
            series: [{                              // 数据列
                name: '阅读量',                        // 数据列名
                data: {{ read_nums }}                     // 数据
            }],
            plotOptions: {
                line: {
                    dataLabels: {
                        enabled: true
                    }
                }
            },
            legend: {
                enabled: false
            },
            credits: {
                enabled: false
            },
        };
        // 图表初始化函数
        var chart = Highcharts.chart('container', options);
    </script>
{% endblock %}